<%@ page import="org.example.entity.Supplier" %>
<%@ page import="java.util.List" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%--导入template模板--%>
<jsp:include page="/common/template.jsp"></jsp:include>
<%--供应商管理内容部分--%>
        <div class="col-9 bg-light" style="font-size: 14px">
<%--首先来一个面包屑导航，说明当前位置--%>
            <nav aria-label="breadcrumb">
                <ol class="breadcrumb">
                    <li class="breadcrumb-item"><a href="/main">首页</a></li>
                    <li class="breadcrumb-item"><a href="#">供应商管理</a></li>
                    <li class="breadcrumb-item active" aria-current="page">供应商列表</li>
                </ol>
            </nav>
<%--    增加一行，用于检索和新增  --%>
            <div class="row mb-1">
                <div class="col-3">
                </div>
                <div class="col-7">
                    <div class="input-group text-right" style="font-size: 14px">
                        <form action="/supplier/search" method="post" class="form-group form-inline" role="form">
                            <input type="search" class="form-control " name="keyword" placeholder="输入内容">
                            <input type="submit" class="form-control bg-info ml-1" value="搜索">
                        </form>
                    </div>
                </div>
                <div class="col-2">
                    <a class="btn btn-primary" data-toggle="modal" data-target="#myModal">新增</a>
                </div>
            </div>
<%--            显示真正的供应商列表内容,这里使用bootstrap的表格--%>
            <table class="table table-bordered table-hover" style="font-size: 14px !important;">
<%--                给出表头显示--%>
                <thead>
                    <tr>
                        <th scope="col">序号</th>
                        <th scope="col">供应商名称</th>
                        <th scope="col">地址信息</th>
                        <th scope="col">联系电话</th>
                        <th scope="col">管理</th>
                    </tr>
                </thead>
                <tbody>
                <%--  这里需要使用jsp的for循环表达式，当获取了controller传过来的数组列表后，就可以在这里进行显示 --%>
                 <%
                     List<Supplier> supplier=(List<Supplier>)request.getAttribute("data");
                     for (int i=0;i<supplier.size();i++){
                 %>
                        <tr>
                            <td><%=supplier.get(i).getId()%></td>
                            <td><%=supplier.get(i).getName()%></td>
                            <td><%=supplier.get(i).getAddress()%></td>
                            <td><%=supplier.get(i).getTelephone()%></td>
                            <td style="font-size: 12px !important;">
                                <a class="btn btn-danger" data-toggle="modal" data-target="#myModalDelete" onclick="deleteID(<%=supplier.get(i).getId()%>)">删除</a>
                                <a class="btn btn-success" data-toggle="modal" data-target="#myModalUpdate" onclick="updateID(<%=supplier.get(i).getId()%>,'<%=supplier.get(i).getName()%>','<%=supplier.get(i).getAddress()%>','<%=supplier.get(i).getTelephone()%>')">更新</a>
                            </td>
                        </tr>
                 <% } %>
                </tbody>
            </table>
<%--    可以设置每页仅显示多少，多了后就开始分页处理   --%>
            <div class="pager text-center">
                <a href="/supplier?pageIndex=<%=request.getAttribute("preIndex")%>" class="mr-4" id="prePage">前一页</a>
                <a href="supplier?pageIndex=<%=request.getAttribute("nextIndex")%>" id="nextPage">下一页</a>
            </div>
        </div>
    </div>
</div>
<!-- 模态框（Modal） -->
<%-- 添加新增记录窗口 --%>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title" id="myModalLabel">
                    新增供应商
                </h4>
            </div>
            <div class="modal-body">
                <%--    使用bootstrap表单方式设计好供应商信息输入表单  --%>
                <div class="row ml-4">
                    <form class="form-horizontal" role="form" action="/supplier/addSupplier" method="post">
                        <div class="form-group form-inline">
                            <label for="name">请输入供应商名称：</label>
                            <input type="text" name="name" class="form-control" required="required">
                        </div>
                        <div class="form-group form-inline">
                            <label for="addr">请输入供应商地址：</label>
                            <input type="text" name="addr" class="form-control" required="required">
                        </div>
                        <div class="form-group form-inline">
                            <label for="phone">请输入供应商电话：</label>
                            <input type="text" name="phone" class="form-control">
                        </div>
                        <div class="form-group text-center">
                            <input type="submit" value="提交" class="btn btn-danger">
                            <input value="关闭" type="reset" class="btn btn-info" data-dismiss="modal">
                        </div>
                    </form>
                </div>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>
<%--添加删除模块框--%>
<div class="modal fade" id="myModalDelete" tabindex="-1" role="dialog" aria-labelledby="myModalLabel2" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title" id="myModalLabel2">
                    确认删除该供应商信息？
                </h4>
            </div>
            <div class="modal-body">
                <%--    使用bootstrap表单方式设计好供应商信息输入表单  --%>
                <div class="row ml-4">
                    <form class="form-horizontal" role="form" action="/supplier/deleteSupplier" method="post">
                        <%--必须要加一个隐藏的表单输入 ，这样绑定了该记录的id --%>
                        <input type="hidden" id="supplierDeleteID" name="id">
                        <div class="form-group text-center">
                            <input type="submit" value="删除" class="btn btn-danger">
                            <input value="取消" type="reset" class="btn btn-info" data-dismiss="modal">
                        </div>
                    </form>
                </div>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>

<%--添加更新记录模态窗口内容--%>
<div class="modal fade" id="myModalUpdate" tabindex="-1" role="dialog" aria-labelledby="myModalLabel1" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title" id="myModalLabel1">
                    更新该供应商信息
                </h4>
            </div>
            <div class="modal-body">
                <%--    使用bootstrap表单方式设计好供应商信息输入表单  --%>
                <div class="row ml-4">
                    <form class="form-horizontal" role="form" action="/supplier/updateSupplierProcess" method="post">
                        <div class="form-group form-inline">
                            <label for="name">请输入供应商名称：</label>
                            <input type="text" name="name" class="form-control" required="required" id="name">
                        </div>
                        <div class="form-group form-inline">
                            <label for="addr">请输入供应商地址：</label>
                            <input type="text" name="addr" class="form-control" required="required" id="addr">
                        </div>
                        <div class="form-group form-inline">
                            <label for="phone">请输入供应商电话：</label>
                            <input type="text" name="phone" class="form-control" id="phone">
                        </div>
                        <div class="form-group text-center">
                            <input type="submit" value="提交" class="btn btn-danger">
                            <input value="关闭" type="reset" class="btn btn-info" data-dismiss="modal">
                        </div>
                        <%--必须要加一个隐藏的表单输入 ，这样绑定了该记录的id --%>
                        <input type="hidden" id="supplierUpdateID" name="id">
                    </form>
                </div>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>
</body>
</html>
<script src="/static/bootstrap-4.6.2-dist/js/jquery.js"></script>
<script type="text/javascript" src="/static/bootstrap-4.6.2-dist/js/bootstrap.min.js"></script>
<script>
    <%--    当点击删除按钮时，先弹出确认框-确认删除再执行删除操作  --%>
    function deleteID(id){
        console.log(id);
        $('#supplierDeleteID').val(id);
    }
    <%--    当点击更新按钮时就将传递过来的参数赋值给模态框里的对应输入框 --%>
    function updateID(id,name,addr,phone){
        $('#supplierUpdateID').val(id);
       $('#name').val(name);
       $('#addr').val(addr);
       $('#phone').val(phone);
    }
//    通过ajax请求方式获得总页数
 var totalPage = <%=request.getAttribute("totalpage")%>;

</script>